<template>
    <div class="leftBottom">
      <div class="title">
        <span class="word">场景需求:节能、舒适</span>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="To"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          />
        </div>
      </div>
      <div class="line"></div>
      <div>
         <el-table :data="tableData.slice((currentPage-1)*pagesize, currentPage * pagesize)" stripe style="width: 100%">
          <el-table-column prop="num" label="序号" width="50" />
          <el-table-column prop="data" label="日期" width="100" />
          <el-table-column prop="contant" label="需求内容" />
          <el-table-column prop="address" label="级别" width="50"/>
        </el-table>
      </div>
       <div class="page">
          <div class="example-pagination-block">
          <el-pagination

        layout="prev,pager,next"

        :total="tableData.length"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

      />
        </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
var currentPage=ref(1)
var pagesize=ref(3)
const value1 = ref('')
const tableData = reactive([
  {
    num: '1',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '2',
    contant: '五层506-508单元投诉网',
    data:'2001-0719',
    address: '1',
  },
  {
    num: '3',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '4',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '5',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '6',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '7',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '8',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '9',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '10',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },
  {
    num: '10',
    data:'2001-0719',
    contant: '五层506-508单元投诉网',
    address: '1',
  },


])
function handleSizeChange(size) {

      //一页显示多少条

      pagesize = size;

    }
// function handleCurrentChange (currentPage) {

//       //页码更改方法

//       currentPage = currentPage;

//     }
</script>

<style scoped lang="less">
.leftBottom{
    width:100%;
    border-style: none;
    border-color: unset;
    box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
    border-radius: 8px;
    font-size: 14px;
    padding: 0px;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    background-color: white;

    .title{
      padding: 15px;
      display: flex;
      position: relative;
      .word{
        font-family: SourceHanSansSC;
        font-weight: 550;
        font-size: 20px;
        color: rgb(77, 98, 165);
        font-style: normal;
        letter-spacing: 2px;
        line-height: 28px;
        text-decoration: none;
      }
  }
    .line{
      border-bottom: 2px rgba(77,98,165,0.2) solid;
    }
    .page{
      margin-left: 160px;
    }
    .block{
      width: 200px;
      margin-left: 20px;
    }
}
</style>
<style >
 .example-pagination-block + .example-pagination-block {

  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
.el-table tr {
    background-color:rgb(246, 250, 255);
}

.demo-date-picker {
  display: flex;
  width: 100% ;
  padding: 0;
  flex-wrap: wrap;

}
.el-date-editor--daterange.el-input__inner{
  width: 230px;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
}
</style>

